<template>
  <!-- 系统管理-权限管理-编辑权限 -->
  <div class="form-div">
    <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
      <el-form-item label="权限名称" prop="permissionName">
        <el-input v-model="form.permissionName"></el-input>
      </el-form-item>
      <el-form-item label="选择菜单" prop="menuName">
        <el-cascader v-model="selectedMenu" :model-value="echoMenu" :options="menuList" :props="menuProps" clearable/>
      </el-form-item>
      <el-form-item label="权限描述" prop="permissionDesc">
        <el-input v-model="form.permissionDesc"></el-input>
      </el-form-item>
      <el-form-item label="是否父级" prop="isParent">
        <el-radio-group v-model="form.isParent">
          <el-radio :value="1">父级</el-radio>
          <el-radio :value="0">子级</el-radio>
          <el-radio :value="2">操作</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save(formRef)">保存</el-button>
        <el-button @click="$emit('close')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>

import {getMenuListApi} from "@/assets/api/system/menu";
import {onMounted, ref} from "vue";
import {editPermissionApi} from "@/assets/api/system/permission";
import {ElMessage} from "element-plus";

const props = defineProps({
  form: {
    permissionName: String,
    menuId: String,
    menuName: String,
    permissionDesc: String,
    isParent: Number,
    remark: String,
  },
  disabled: {type: Boolean, default: false}, // 如果是编辑则禁用部分字段
  echoMenu: Array, // 回显的菜单
});

const emit = defineEmits(['close', 'save']);

// 获取菜单列表
const menuList = ref([]);
const selectedMenu = ref(props.echoMenu);
const getMenuList = () => {
  getMenuListApi().then(res => {
    menuList.value = res.data.data.list;
  })
}

// 级联菜单映射
const menuProps = {
  checkStrictly: true,
  value: 'id',
  label: 'menuName',
  children: 'children'
}

// 表单验证
const formRef = ref();
const menuCascader = (rule, value, callback) => {
  if (selectedMenu.value.length === 0) {
    callback(new Error('请选择菜单'))
  } else {
    callback();
  }
}
const rules = ref({
  permissionName: [{required: true, message: '请输入权限名称', trigger: 'blur'}],
  menuName: [{required: true, validator: menuCascader, trigger: 'blur'}],
  permissionDesc: [{required: true, message: '请输入权限描述', trigger: 'blur'}],
  isParent: [{required: true, message: '请选择是否父级', trigger: 'blur'}]
});


// 保存
const save = async (formEl) => {
  props.form.menuId = selectedMenu.value.join(",");
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      editPermissionApi(props.form).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("保存成功");
          emit('save', true);
        } else {
          ElMessage.error(res.data.msg);
          emit('save', false);
        }
      })
    }
  })
}

onMounted(() => {
  getMenuList();
});
</script>

<style scoped>

</style>